<template>
	<view class="content">
		<view class="content-grid">
			<view class="filmBtn" v-for="(item,index) in filmData" @click="lookVideo(item)" :key="item.id">
				<text class="cuIcon-lock" v-if="!item.type" :data-id="item.id"></text>
				<text>{{item.number}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			filmData: {
				type: Array,
				default: []
			}
		},

		data() {
			return {

			}
		},
		methods: {
			//点击打开视频
			lookVideo(item) {
				if (item.type) {
					uni.navigateTo({
						url: `/pages/filmVideo/filmVideo?resourceId=${item.id}`,
					});
					return false
				}
				this.unlockResourceEvent(item)
			},
			//解锁资源事件
			unlockResourceEvent(item) {
				this.$emit("unlockResource", item.id)
			}
		}
	}
</script>

<style scoped>
	@import '../../article.css';

	.content {
		min-height: 100vh;
		padding-top: 5px;
		background-color: #292a3f;
	}

	.content-grid {
		min-height: 100vh;
		display: grid;
		grid-template: repeat(4, 40px) / repeat(4, 1fr);
		background-color: #292a3f;
	}

	.filmBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		margin: 5px 10px;
		padding: 5px 10px;
		background-color: #767676;
		border-radius: 5px;
	}

	.cuIcon-lock {
		margin-right: 5px;
		background-color: #767676;
	}
</style>